{% extends '../layout.html'%}

{% block content %}

<body style="background-color: #fff;">
<header class="main-header flex-wrap">
    <a href="javascript:history.back();" class="back-btn left">
        <img src="./img/back_icon.png" width="10" height="17" alt="">
    </a>
    <div class="flex-1">商品详情</div>
</header>
<section class="swiper-container" style="height: 190px">
    <section class="swiper-wrapper">
        {% for i in ThumbPicture%}
        <div class="swiper-slide">
            <img src="{{uri}}{{i}}" width="100%" height="100%" alt="">
        </div>

        {% endfor%}

    </section>
    <div class="swiper-pagination"></div>
</section>
<div class="detail-name">
    {{ProductName}}<span class="hilight">{{ProductSubName}}</span>
</div>
<!-- 默认状态 -->
{% if Status == 1%}
<div class="detail-buy flex-wrap">
    <div class="flex-1">
        <div class="hilight tit">夺宝购买</div>
        <p>期号:{{SeriesNo}}</p>
        <p>需要{{PersonTimes}}人次,剩余{{PersonTimes-JoinPersonTimes}}人次即可开奖</p>
        <div class="progress-wrap">
            <div class="progress" style="width: {{process}}%;"></div>
        </div>
    </div>
    <div class="buy-btn">
        <!--<a href="" class="btn">加入清单</a>-->
        <a href="listConfirm?type=1&id={{Id}}" class="btn">立即购买</a>
        <a href="listConfirm?type=2" class="btn" killnum="{{PersonTimes-JoinPersonTimes}}">秒杀商品</a>
    </div>
</div>
{% else %}
<div class="kill-wrap ">
    <div class="flex-wrap">
        <img src="img/demo/head-img.png" class="head-img" width="30" height="30" alt="">
        <div class="flex-1">
            <p>用户昵称 <span class="hilight">(188888888)</span></p>
            <p>IP地址:111.111.111.11(四川成都)</p>
            <p>本期秒杀 <span class="hilight">234</span>人次</p>
        </div>
    </div>
    <div class="kill-tips flex-wrap">
        <div class="flex-1">
            <p class="tit">即将秒杀开奖</p>
            <p>期号:8888888888</p>
            <p>揭晓倒计时:5:30:22</p>
        </div>
        <a href="" class="kill-calc" style="margin-top: 17px;">计算详情</a>
    </div>
    <p class="text-center">秒杀成功可夺他人幸运号码,失败则反向支付相同金额</p>
</div>
{% endif %}


<!--<p class="text-center buy-total">您已购买38人次</p>-->
<ul class="buy-handle-list">
    <li>
        <div class="handle-wrap">
            <a class="flex-wrap">
                <div class="flex-1">商品详情</div>
                <em class="right-arrow"></em>
            </a>
        </div>
        <!--<div class="handle-content hide">-->
            <!--{{ ProductContent }}-->
        <!--</div>-->
    </li>
    <li>
        <div class="handle-wrap">
            <a class="flex-wrap">
                <div class="flex-1">往期记录</div>
                <em class="right-arrow"></em>
            </a>
        </div>
        <div class="handle-content">
            <ul class="pro-his-list">

            </ul>
        </div>
    </li>
    <li>
        <div class="handle-wrap">
            <a class="flex-wrap">
                <div class="flex-1">晒单分享</div>
                <em class="right-arrow"></em>
            </a>
        </div>
    </li>
    <li>
        <div class="handle-wrap">
            <a class="flex-wrap">
                <div class="flex-1">本期参与记录</div>
                <em class="right-arrow"></em>
            </a>
        </div>
    </li>
</ul>

<ul class="join-list">
    <li>
        <div class="flex-wrap">
            <img class="head-img" src="./img/demo/head-img.png" width="45" height="45" alt="">
            <div class="flex-1">
                <p>用户昵称 <span class="hilight">(180****2372)</span></p>
                <p>IP地址:384.34.123.23(四川成都)</p>
                <p>参与本期1人次 2016-07-12 12:23:11</p>
            </div>
        </div>
    </li>
    <li>
        <div class="flex-wrap">
            <img class="head-img" src="./img/demo/head-img.png" width="45" height="45" alt="">
            <div class="flex-1">
                <p>用户昵称 <span class="hilight">(180****2372)</span></p>
                <p>IP地址:384.34.123.23(四川成都)</p>
                <p>参与本期1人次 2016-07-12 12:23:11</p>
            </div>
        </div>
    </li>
    <li>
        <div class="flex-wrap">
            <img class="head-img" src="./img/demo/head-img.png" width="45" height="45" alt="">
            <div class="flex-1">
                <p>用户昵称 <span class="hilight">(180****2372)</span></p>
                <p>IP地址:384.34.123.23(四川成都)</p>
                <p>参与本期1人次 2016-07-12 12:23:11</p>
            </div>
        </div>
    </li>
</ul>
{% include '../script.html'%}
<script src="Swiper/dist/js/swiper.jquery.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container');
</script>
</body>

{% endblock%}